<template>
    <div class="page-group">
        <div class="page page-current">
            <!-- 标题栏 -->
            <v-header :head_title="head_title" @toggle_searchbar="toggle_searchbar"></v-header>
            <!--搜索-->
            <search-bar :show_searchbar="show_searchbar" @enter_searchbar="enter_searchbar"></search-bar>
            <!-- 这里是页面内容区 -->
            <div class="content">
                <!--列表卡片-->
                <index-item v-for="item in items" class="card" :key="item.id" aaa="'测试传值'" :item="item"></index-item>
                <!--分页插件-->
                <paginate
                        :page-count="count"
                        :page-range="3"
                        :margin-pages="2"
                        :click-handler="url_to_page"
                        :prev-text="'Prev'"
                        :next-text="'Next'"
                        :container-class="'pagination'"
                        :page-class="'page-item'"
                        id="pagi"
                >
                </paginate>
            </div>
        </div>
        <div id="sassbox"></div>
        <!--侧栏-->
        <div class="panel-overlay"></div>
        <left-panel></left-panel>
        <right-panel></right-panel>
    </div>
</template>

<script>
    import vHeader from '../components/Header.vue'
    import LeftPanel from '../components/LeftPanel.vue'
    import RightPanel from '../components/RightPanel.vue'
    import IndexItem from '../components/IndexItem.vue'
    import SearchBar from '../components/SearchBar.vue'
    import Store from '../lib/vuex/store.js'

    export default {
        name: 'Index',
        components:{
            vHeader, LeftPanel, IndexItem, SearchBar, RightPanel
        },
        data() {
            return{
                head_title: 'whx博客',
                items : [],
                count: 0,
                show_searchbar: false
            }
        },
        computed:{
            ht(){
                return this.head_title;
            }
        },
        created (){
            var u = process.env.HOST_URL + '/portal/index/api_index/';
            this.$http.get(u).then(function(res){
                var d = res.body.data;
                //console.log(d);
                this.count = Math.ceil(d.count / 10);
                var list = res.data.data.list;
                this.items = this.articleList = list;
            })
        },
        methods:{
            url_to_page(e){
                //分页事件
                if(e){
                    var u = process.env.HOST_URL + '/portal/index/api_index/';
                    this.$http.get(u, {params: {page: e}}).then(function(res){
                        var d = res.body.data;
                        //console.log(d);
                        this.count = Math.ceil(d.count / 10);
                        var list = res.data.data.list;
                        this.items = this.articleList = list;
                    })
                }
                Store.commit('increment');
                console.log('store.count: ' + Store.state.count);
            },
            toggle_searchbar(){
                //显示隐藏搜索
                this.show_searchbar = !this.show_searchbar;
                //this.head_title = 'xxxxxx';
            },
            enter_searchbar (evt){
                //搜索事件...待续
                var _this = this;
                $.showPreloader(evt);
                setTimeout(function () {
                    $.hidePreloader();
                    _this.show_searchbar = !_this.show_searchbar
                }, 2000);
            },
            closePanel(){
                $.closePanel();
            }
        }

    }
</script>


<style scoped lang="scss">
    @import "../lib/sass/common.scss";

    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }

    div.rtlk{
        cursor: pointer;
    }

    #sassbox{
        width: $width;
        background-color: #000000;
        height:2rem;
    }
</style>
